<template>
  <div id="flex" class="mainMargin textAlignC">

    <!-- -------------------- 等分布局 -------------------- -->
    <h3 class="marginT10 marginB10">等分布局</h3>
    <ul class="width-flex marginT10">
      <li class="width-1-10 backBgDCDCDC">1等份</li>
      <li class="width-9-10 backBgBlue">9等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-2-10 backBgDCDCDC">2等份</li>
      <li class="width-8-10 backBgBlue">8等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-3-10 backBgDCDCDC">3等份</li>
      <li class="width-7-10 backBgBlue">7等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-4-10 backBgDCDCDC">4等份</li>
      <li class="width-6-10 backBgBlue">6等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-5-10 backBgDCDCDC">5等份</li>
      <li class="width-5-10 backBgBlue">5等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-percent-3 backBgDCDCDC">百分比3等份</li>
      <li class="width-percent-3 backBgBlue">百分比3等份</li>
      <li class="width-percent-3 backBgDCDCDC">百分比3等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-percent-4 backBgDCDCDC">百分比4等份</li>
      <li class="width-percent-4 backBgBlue">百分比4等份</li>
      <li class="width-percent-4 backBgDCDCDC">百分比4等份</li>
      <li class="width-percent-4 backBgBlue">百分比4等份</li>
    </ul>
    <ul class="width-flex marginT10">
      <li class="width-percent-5 backBgDCDCDC">百分比5等份</li>
      <li class="width-percent-5 backBgBlue">百分比5等份</li>
    </ul>


    <!-- -------------------- flex-direction属性 -------------------- -->
    <h3 class="marginT10 marginB10">flex-direction</h3>
    <div class="textAlignL">
      <p>row（默认值）：主轴为水平方向，起点在左端。</p>
      <p>row-reverse：主轴为水平方向，起点在右端。</p>
      <p>column：主轴为垂直方向，起点在上沿。</p>
      <p>column-reverse：主轴为垂直方向，起点在下沿。</p>
    </div>
    <ul>
      <li class="marginT10 direction-row">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
      <li class="marginT10 direction-row-reverse">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
      <li class="marginT10 direction-column">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
      <li class="marginT10 direction-column-reverse">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
    </ul>


    <!-- -------------------- flex-wrap属性 -------------------- -->
    <h3 class="marginT10 marginB10">flex-wrap</h3>
    <div class="textAlignL">
      <p>默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
    </div>
    <ul>
      <li class="wrap-nowrap">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
      <li class="wrap-wrap">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
      <li class="wrap-reverse">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
    </ul>


    <!-- -------------------- flex-flow属性 -------------------- -->
    <h3 class="marginT10 marginB10">flex-flow</h3>
    <div class="textAlignL">
      <p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
    </div>
    <ul>
      <li class="flow-row-reverse">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
        <div class="backBgBlue wh100">4</div>
      </li>
    </ul>


    <!-- -------------------- justify-content属性 -------------------- -->
    <h3 class="marginT10 marginB10">justify-content</h3>
    <div class="textAlignL">
      <p>justify-content属性定义了项目在主轴上的对齐方式。</p>
      <p>flex-start（默认值）：左对齐</p>
      <p>flex-end：右对齐</p>
      <p>center： 居中</p>
      <p>space-between：两端对齐，项目之间的间隔都相等。</p>
      <p>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
    </div>
    <ul>
      <li class="justify-content-flex-start">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
      </li>
      <li class="justify-content-flex-end">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
      </li>
      <li class="justify-content-center">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
      </li>
      <li class="justify-content-space-between">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
      </li>
      <li class="justify-content-space-around">
        <div class="backBgDCDCDC wh100">1</div>
        <div class="backBgBlue wh100">2</div>
        <div class="backBgDCDCDC wh100">3</div>
      </li>
    </ul>


    <!-- -------------------- align-items属性 -------------------- -->
    <h3 class="marginT10 marginB10">align-items</h3>
    <div class="textAlignL">
      <h4>align-items属性定义项目在交叉轴上如何对齐。</h4>
      <p>flex-start：交叉轴的起点对齐。</p>
      <p>flex-end：交叉轴的终点对齐。</p>
      <p>center：交叉轴的中点对齐。</p>
      <p>baseline: 项目的第一行文字的基线对齐。</p>
      <p>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>
      <p></p>
    </div>
    <ul>
      <li class="align-items-flex-start marginT10">
        <div class="backBgDCDCDC wh100-70">1</div>
        <div class="backBgBlue wh100-90">2</div>
        <div class="backBgDCDCDC wh100-80">3</div>
        <div class="backBgBlue wh100-70">4</div>
      </li>
      <li class="align-items-flex-end marginT10">
        <div class="backBgDCDCDC wh100-70">1</div>
        <div class="backBgBlue wh100-90">2</div>
        <div class="backBgDCDCDC wh100-80">3</div>
        <div class="backBgBlue wh100-70">4</div>
      </li>
      <li class="align-items-center marginT10">
        <div class="backBgDCDCDC wh100-70">1</div>
        <div class="backBgBlue wh100-90">2</div>
        <div class="backBgDCDCDC wh100-80">3</div>
        <div class="backBgBlue wh100-70">4</div>
      </li>
      <li class="align-items-baseline marginT10">
        <div class="backBgDCDCDC wh100-70" style="line-height: .4rem">1</div>
        <div class="backBgBlue wh100-90">2</div>
        <div class="backBgDCDCDC wh100-80" style="line-height: .6rem">3</div>
        <div class="backBgBlue wh100-70">4</div>
      </li>
      <li class="align-items-stretch marginT10">
        <div class="backBgDCDCDC wh100-70">1</div>
        <div class="backBgBlue wh100-90">2</div>
        <div class="backBgDCDCDC wh100-80">3</div>
        <div class="backBgBlue wh100-70">4</div>
      </li>
    </ul>


    <!-- -------------------- align-content属性 -------------------- -->
    <h3 class="marginT10 marginB10">align-content</h3>
    <div class="textAlignL">
      <h4>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</h4>
      <p>flex-start：与交叉轴的起点对齐。</p>
      <p>flex-end：与交叉轴的终点对齐。</p>
      <p>center：与交叉轴的中点对齐。</p>
      <p>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
      <p>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p>
      <p>stretch（默认值）：轴线占满整个交叉轴。</p>
    </div>
    <ul>
      <li class="marginT10">
        <div class="align-content-flex-start" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
      <li class="marginT10">
        <div class="align-content-flex-end" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
      <li class="">
        <div class="align-content-center marginT10" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
      <li class="marginT10">
        <div class="align-content-space-between" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
      <li class="marginT10">
        <div class="align-content-space-around" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
      <li class="marginT10">
        <div class="align-content-stretch" style="width: 100%;height: 2.3rem;background-color: burlywood;">
          <div class="backBgDCDCDC wh100">1</div>
          <div class="backBgBlue wh100">2</div>
          <div class="backBgDCDCDC wh100">3</div>
          <div class="backBgBlue wh100">4</div>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
  export default {
    name: 'flex',
    data() {
      return {}
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

  .flex {
    display: -webkit-flex; /* Safari */
    display: flex;
  }

  /*--平等分--*/
  .width-flex {
    display: -webkit-flex;
    -webkit-flex-flow: row;
    -webkit-align-items: stretch;
    -webkit-justify-content: space-between;
    display: -ms-flex;
    -ms-flex-flow: row wrap;
    -ms-align-items: stretch;
    -ms-justify-content: space-between;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    justify-content: space-between;
  }

  /*--1等份--*/
  .width-1-10 {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
  }

  /*--2等份--*/
  .width-2-10 {
    -webkit-flex: 2;
    -moz-flex: 2;
    flex: 2;
  }

  /*--3等份--*/
  .width-3-10 {
    -webkit-flex: 3;
    -moz-flex: 3;
    flex: 3;
  }

  /*--4等份--*/
  .width-4-10 {
    -webkit-flex: 4;
    -moz-flex: 4;
    flex: 4;
  }

  /*--5等份--*/
  .width-5-10 {
    -webkit-flex: 5;
    -moz-flex: 5;
    flex: 5;
  }

  /*--6等份--*/
  .width-6-10 {
    -webkit-flex: 6;
    -moz-flex: 6;
    flex: 6;
  }

  /*--7等份--*/
  .width-7-10 {
    -webkit-flex: 7;
    -moz-flex: 7;
    flex: 7;
  }

  /*--8等份--*/
  .width-8-10 {
    -webkit-flex: 8;
    -moz-flex: 8;
    flex: 8;
  }

  /*--9等份--*/
  .width-9-10 {
    -webkit-flex: 9;
    -moz-flex: 9;
    flex: 9;
  }

  /*--百分比33.33%--*/
  .width-percent-3 {
    width: 33.33%;
    float: left;
    text-align: center;
  }

  /*--百分比25%--*/
  .width-percent-4 {
    width: 25%;
    float: left;
    text-align: center;
  }

  /*--百分比50%--*/
  .width-percent-5 {
    width: 50%;
    float: left;
    position: relative;
    height: 100%;
  }

  /*--flex-direction属性--*/
  .direction-row {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row; /* Safari 6.1+ */
    display: flex;
    flex-direction: row;
  }

  .direction-row-reverse {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
  }

  .direction-column {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column; /* Safari 6.1+ */
    display: flex;
    flex-direction: column;
  }

  .direction-column-reverse {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: column-reverse;
  }

  /*--flex-wrap属性--*/
  .wrap-nowrap {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: nowrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: nowrap;
  }

  .wrap-wrap {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: wrap;
  }

  .wrap-reverse {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: wrap-reverse; /* Safari 6.1+ */
    display: flex;
    flex-flow: wrap-reverse;
  }

  /*--flex-flow属性--*/
  .flow-row-reverse {
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row-reverse wrap;
  }

  /*--justify-content属性--*/
  .justify-content-flex-start {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: flex-start; /* Safari 6.1+ */
    display: flex;
    justify-content: flex-start
  }

  .justify-content-flex-end {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: flex-end; /* Safari 6.1+ */
    display: flex;
    justify-content: flex-end
  }

  .justify-content-center {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: center; /* Safari 6.1+ */
    display: flex;
    justify-content: center
  }

  .justify-content-space-between {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    display: flex;
    justify-content: space-between
  }

  .justify-content-space-around {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around
  }

  /*--align-items属性--*/
  .align-items-flex-start {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
  }

  .align-items-flex-end {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-end; /* Safari 7.0+ */
    display: flex;
    align-items: flex-end;
  }

  .align-items-center {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
  }

  .align-items-baseline {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: baseline; /* Safari 7.0+ */
    display: flex;
    align-items: baseline;
  }

  .align-items-stretch {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: stretch; /* Safari 7.0+ */
    display: flex;
    align-items: stretch;
  }

  /*--align-content属性--*/
  .align-content-flex-start {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: flex-start;
    display: flex;
    align-content: flex-start;
  }

  .align-content-flex-end {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: flex-end;
    display: flex;
    align-content: flex-end;
  }

  .align-content-center {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: center;
    display: flex;
    align-content: center;
  }

  .align-content-space-between {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: space-between;
    display: flex;
    align-content: space-between;
  }

  .align-content-space-around {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: space-around;
    display: flex;
    align-content: space-around;
  }

  .align-content-stretch {
    display:-webkit-flex; /* Safari */
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-direction:wrap;

    -webkit-align-content: stretch;
    display: flex;
    align-content: stretch;
  }

</style>
